/**
 * 
 * 状态和更新 分离
 * 
 */
import {createContext, useState, useContext} from 'react'

let Context = createContext() // 更新状态
let ContextDisplay = createContext() // 展示状态


export function useCount() {
  let myCount = useContext(Context)
  return myCount
}

export function useCountDisplay() {
  let myCountDisplay = useContext(ContextDisplay)
  return myCountDisplay
}

export function ContextProvider4({children}){

  let [state, setState] = useState(0)
  let setObj = {
    state,
    add(v){
      setState(state+v)
    },
    reduce(v){
      setState(state-v)
    }
  }

  return (
    <ContextDisplay.Provider value={state}>
      <Context.Provider value={setObj}>
        {children}
      </Context.Provider>
    </ContextDisplay.Provider>
    
  )
}